<template>
  <div class="profile-container">
    <div class="profile-header">
      <div class="profile-header-inner">
        <div class="profile-info">
          <Image class="profile-info-avatar" round fit="cover" src="../other/avatar.png"></Image>
          <div class="profile-info-main">
            <span class="profile-info-main-nickname">小兵良品</span>
            <span class="profile-info-main-phone">所属门店：烟台</span>
          </div>
        </div>
        <!-- <div class="profile-number">
          <div class="profile-number-box">
            <span class="profile-number-box-num">1,892</span>
            <span class="profile-number-box-text">我的金币</span>
          </div>
          <div class="profile-number-box">
            <span class="profile-number-box-num">212</span>
            <span class="profile-number-box-text">今日金币</span>
          </div>
          <div class="profile-number-box">
            <span class="profile-number-box-num">2.3</span>
            <span class="profile-number-box-text">今日阅读(分钟)</span>
          </div>
        </div> -->
      </div>
      <GridCard class="profile-action-card" :items="ActionCard"></GridCard>
      <GridCard :columnNum="4" :items="InfoCard"></GridCard>
      <div style="height: 15px;"></div>
      <GridCard :columnNum="3" title="系统设置" :items="SystemCard"></GridCard>
    </div>
  </div>
</template>

<script setup name="Profile">
import { reactive } from 'vue';
import { Image } from "vant";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const router = useRouter();

import GridCard from "@/components/GridCard/index.vue"
const ActionCard = reactive({
  Order: {
    text: '全部订单',
    svg: 'Order',
    dot: true,
    to: '/my/orderList?status=0'
  },
  Withdrawal: {
    text: '待付款',
    svg: 'Withdrawal',
    to: '/my/orderList?status=1'
  },
  Friend: {
    text: '待收货',
    svg: 'Friend',
    to: '/my/orderList?status=2'
  },
  Profit: {
    text: '我的优惠券',
    svg: 'Profit',
    badge: '9+'
  }
})

const InfoCard = reactive({
  MyCar: {
    text: '我的购物车',
    icon: 'cart-o',
    to: '/my/shoppingCart'
  },
  MyLike: {
    text: '我的关注',
    icon: 'like-o',
    to: '/like'
  },
  History: {
    text: '历史记录',
    icon: 'clock-o',
    // to: '/'
  },
  MyCollect: {
    text: '直播',
    icon: 'star-o',
    to: '/live'
  }
})
const SystemCard = reactive({
  BackHome: {
    text: '返回首页',
    icon: 'home-o',
    to: '/home'
  },
  OutLog: {
    text: '退出登录',
    icon: 'close',
    func: onLogout
  }
})

// 退出登录
function onLogout() {
  userStore.LogOut().then(() => {
    router.push({ path: "/login" });
  });
}

function Log() {
  console.log("Log");
}

</script>

<style lang="scss" scoped>
.profile-container {

  .profile-header {
    overflow: hidden;

    &-inner {
      position: relative;
      width: 100%;
      height: 200px;
      z-index: 0;

      &:after {
        width: 140%;
        height: 200px;
        position: absolute;
        left: -20%;
        top: 0;
        z-index: -1;
        content: '';
        border-radius: 0 0 50% 50%;
        background-color: #2f343e;
      }

      .profile-info {

        height: 64px;
        color: #fff;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 50px 20px 0px 20px;



        &-avatar {
          border: 3px solid #aeb0b3;
          width: 64px;
          height: 64px;
        }

        &-main {

          height: 100%;
          padding: 0px 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          &-nickname {
            font-size: 20px;
            font-weight: 500;
          }

          &-phone {
            font-size: 14px;
            font-weight: 300;
          }
        }
      }

      .profile-number {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        height: 50px;
        padding: 20px 10px 0px 10px;
        color: #fff;

        &-box {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          width: calc(100vh / 3);

          &-num {
            font-size: 21px;
            font-weight: 600;
          }

          &-text {
            font-size: 13px;
          }
        }
      }
    }

    .profile-action-card {
      margin: -65px 20px 20px 20px;
    }
  }

}
</style>